<template>
	<view class="page">
		<view class="logo">
			<image :src="logoPng" mode=""></image>
		</view>
		<!-- 填写区 -->


		<view class="input-info">
			<view class="info">
				
				<input type="tel" v-model="form.tel" maxlength="11" placeholder="手机号">
				<view class="more">

				</view>
			</view>
			<view class="info">
				<input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
				<view class="more">
					<text class="mo" @click="getPhoneCode">{{btnValue}}</text>
					<text class="mo" style="display: none">{{second}}秒后重试</text>
				</view>
			</view>
			<view class="info">
				<input :password='!isPassword' maxlength="26" v-model="form.passwd" placeholder="请输入密码">
				<view class="more">
					<text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'"
						@click="isPassword = !isPassword"></text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-info">
			<view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
				<text>注册</text>
			</view>
		</view>
		<!-- 操作 -->
		<view class="operation">
			<text></text>
			<text @click="onLogin">已有账号?登录</text>
		</view>
	</view>
</template>

<script>
	import {
		sendSmsCode,
		registerUser
	} from '@/api/user/userApi.js';
	import conf from '@/conf/config.js';
	export default {
		data() {
			return {
				logoPng: conf.commonBaseUrl + 'h5/static/logo.png',
				isPassword: false,
				isRegister: false,
				codeMsg: "",
				second: 60,
				btnValue: '获取验证码',
				// 表单
				form: {
					tel: '',
					code: '',
					password: '',
				},
			};
		},
		methods: {

			onLogin() {
				uni.redirectTo({
					url: '/pages/public/login'
				})
			},
			getPhoneCode: function() {
				let _that = this;
				if (!this.form.tel) {
					this.vc.toast({
						icon: 'none',
						title: '请先填写手机号'
					});
					return;
				}
				sendSmsCode(this.form.tel,this)
					.then(_data => {
						_that.codeMsg = _data.data;
					})
			},
			
			onRegister() {
				let that = this;
				registerUser(this.form)
					.then(_data => {
							uni.redirectTo({
								url: '/pages/public/login'
							})
						},
						err => {
							uni.showToast({
								icon:'none',
								title:err,
								duration:5000
							});
						})
			}
		},
		watch: {
			form: {
				handler(newValue, oldValue) {
					if (newValue.tel && newValue.code && newValue.passwd) {
						this.isRegister = true;
					} else {
						this.isRegister = false;
					}
				},
				deep: true
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'register.scss';
</style>